// 定义 LogItem 类型
class LogItem {
    constructor(time, message, type, details) {
        this.time = time;
        this.message = message;
        this.type = type;
        this.details = details;
    }
}

// 定义 LogPanel 组件
function LogPanel() {
    return {
        props: ['logs', 'errors'],
        template: `
            <div class="status-section">
                <div class="status-card">
                    <h3>Process Log</h3>
                    <div class="log-content">
                        <div v-for="(log, index) in logs" :key="index" :class="['log-item', log.type]">
                            [{{ log.time }}] {{ log.message }}
                            <div v-if="log.details" class="error-details">{{ log.details }}</div>
                        </div>
                    </div>
                </div>
                <div class="status-card">
                    <h3>Error Messages</h3>
                    <div class="error-content">
                        <div v-for="(error, index) in errors" :key="index" class="error-item">
                            [{{ error.time }}] {{ error.message }}
                            <div v-if="error.details" class="error-details">{{ error.details }}</div>
                        </div>
                    </div>
                </div>
            </div>
        `
    };
}

// 导出组件和类型
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        LogItem,
        LogPanel
    };
} else {
    window.LogPanel = LogPanel();
    window.LogItem = LogItem;
}
